<template>
  <div>
    <Card dis-hover :bordered="false" class="ivu-mt">
      <tableForm />
      <Table :columns="columns" :data="logList" :loading="loading">
          <template slot="number" slot-scope="{row}">
              <a @click="handlelogDetail">{{row.number}}</a>
          </template>
      </Table>
      <div class="ivu-mt ivu-text-center">
        <Page :total="list.length" :current.sync="current" show-elevator show-sizer show-total></Page>
      </div>
    </Card>
    <Modal title="日志详细" v-model="logDetail" :width="700" footer-hide>
        <DescriptionList :col="1">
            <Description term="操作模块：">
                登录模块
            </Description>
            <Description term="操作信息：">
                董小姐 / 客服 / 124.126.244.150 / 北京 北京 / 2018-08-09 13:00
            </Description>
            <Description term="操作内容：">
                            帐号登录
            </Description>
            <Description term="请求地址：">
                    /login
            </Description>
                        <Description term="操作方法：">
com.project.login.job.controller.JobController.login()
            </Description>
                        <Description term="请求参数：">
{"ids":["1001"]}
            </Description>
                        <Description term="操作结果：">
<Tag color="error">异常</Tag>
            </Description>
            </Description>
                        <Description term="异常信息：">
duplicateentry:main/php/com/ruoyi/project/module/transLog/domain/TransLog.php
            </Description>
        </DescriptionList>
    </Modal>
  </div>
</template>
<script>
    import tableForm from './table-form';
    export default {
        components: { tableForm },
        data () {
            return {
                logDetail: false,
                columns: [
                    {
                        title: '日志编号',
                        key: 'number',
                        slot: 'number',
                        fixed: 'left',
                        width: 100
                    },
                    {
                        title: '人员',
                        key: 'person',
                        fixed: 'left',
                        width: 100
                    },
                    {
                        title: '角色',
                        key: 'role',
                        minWidth: 100
                    },
                    {
                        title: '模块',
                        key: 'modules',
                        minWidth: 100
                    },
                    {
                        title: '结果',
                        key: 'result',
                        minWidth: 100
                    },
                    {
                        title: 'IP',
                        key: 'Ip',
                        minWidth: 185
                    },
                    {
                        title: '终端',
                        key: 'terminal',
                        minWidth: 100
                    },
                    {
                        title: '系统',
                        key: 'system',
                        minWidth: 100
                    },
                    {
                        title: '时间',
                        key: 'time',
                        minWidth: 150
                    },
                    {
                        title: '内容',
                        key: 'content',
                        minWidth: 200
                    }
                ],
                list: [],
                current: 1,
                size: 10,
                loading: false
            }
        },
        computed: {
            listData () {
                let data = [...this.list]
                return data;
            },
            logList () {
                const data = this.listData;
                const start = this.current * this.size - this.size;
                const end = start + this.size;
                return [...data].slice(start, end)
            }
        },
        methods: {
            // mockData () {
            //     const item = {};
            //     item.number = 1000;
            //     item.person = '王艳';
            //     item.role = '客服';
            //     item.modules = '登录';
            //     item.result = '登录成功';
            //     item.Ip = '216.3.515.9 | 湖南 长沙';
            //     item.terminal = 'chrome';
            //     item.system = 'window7';
            //     item.time = '2020-06-01 17:03';
            //     item.content = '登录系统';
            //     return item
            // },
            handlelogDetail () {
                this.logDetail = true
            },
            getData () {
                this.current = 1;
                this.loading = true;
                setTimeout(() => {
                    let data = [];
                    for (let i = 0; i < 1000; i++) {
                        data.push({
                            number: 1000 + i,
                            person: '王艳',
                            role: '客服',
                            modules: '登录',
                            result: '登录失败',
                            Ip: '216.3.515.9 | 湖南 长沙',
                            terminal: 'chrome',
                            system: 'window7',
                            time: '2020-06-01 17:03',
                            content: '登录系统'
                        });
                    }
                    this.list = data;
                    this.loading = false;
                }, 1000)
            }
        },
        mounted () {
            this.getData()
        }
    }
</script>
